<template>
  <div class="search">
      <div class="top">
        <span @click="fun()"></span>
        <div class="search-box">
          <img src="search.jpg" alt="">
          <input type="search" placeholder="目的地/酒店/景点/航班号">
        </div>
         <button>搜索</button>
      </div>
      <div class="bottom">
        <h4>热门搜索</h4>
        <ul>
          <li>机票
            <span class="iconfont icon-arrowupleftshangzuojiantou"></span>
          </li>
          <li>酒店
             <span class="iconfont icon-arrowupleftshangzuojiantou"></span>
          </li>
        </ul>
      </div>
  </div>
</template>

<script>
export default {
   methods: {
     fun(){
       this.$router.go(-1)
     }
   },
}
</script>
<style scoped>
.top{
  height: .45rem;
  width: 100%;
  background-color: #e6f0f7;
  border-bottom: 1px solid #ddd;
    position: relative;
}
.top span{
  display: inline-block;
  width: .4rem;
  height: .44rem;
  position: absolute;
  top: 0;
  left: 0;
}
.top span::after{
  position: absolute;
  top: 50%;
  left:50%;
  margin: -0.07rem 0 0 -0.06rem;
  content: "";
  width: .12rem;
  height: .12rem;
  border-left: 1px solid #8a9094;
  border-top: 1px solid #8a9094;
  transform: rotate(-45deg);
}
.search-box{
  display: inline-block;
  margin-top:.05rem;
   height: .36rem;
   border-radius: 5px;
   margin-left: .35rem;
   padding: 0.03rem 0.05rem;
   background-color: #fff;
}
.search-box img{
   width: .2rem;
   height: .2rem;
   vertical-align: middle;
}
.search-box input{
  height: .3rem;
  width: 2.55rem;
  font-size: .14rem;
  outline: none;
  border: none;
  margin-left: .1rem;
}
button{
   width: .4rem;
   height: .44rem;
   color: #099fde;
   background: none;
   text-align: center;
   border: none;
   position: absolute;
   top: 0;
   right: 0;
}
.bottom h4{
  margin: .08rem 15px  .02rem;
  font-weight: normal;
  font-size: .13rem;
  color: #666;
}
.bottom ul{
  border-top: 1px solid #ddd;
}
.bottom ul li{
  height: .45rem;
  line-height: .45rem;
  padding: 0rem .1rem 0 .35rem;
  border-bottom: 1px solid #ddd;
  font-size: .16rem;
}
.bottom ul li span{
  font-size: .2rem;
  color: #666;
  margin-left: 2.72rem;
}
</style>